<template>
    <OAMain title="下属考勤">
        <OADialog title="处理考勤" v-model="dialogVisib" @submit="onSubmitAbsent" label-width="100px">
            <el-form :model="absentForm" :rules="rules" ref="absentFormRef">
                <el-form-item label="结果" prop="status">
                    <el-radio-group v-model="absentForm.status">
                        <el-radio :value="2">通过</el-radio>
                        <el-radio :value="3">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审批意见" prop="response_content">
                    <el-input type="textarea" v-model="absentForm.response_content" autocomplete="off" />
                </el-form-item>
            </el-form>
        </OADialog>
        <el-card>
            <el-table :data="absents">
                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column label="发起者" width="180">
                    <template #default="scope">
                        {{ '[' + scope.row.requester.department.name + ']' + scope.row.requester.realname }}
                    </template>
                </el-table-column>
                <el-table-column prop="absent_type.name" label="类型" width="180" />
                <el-table-column prop="requset_content" label="原因" />
                <el-table-column label="发起时间">
                    <template #default="scope">
                        {{ dateformat.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="start_date" label="开始日期" />
                <el-table-column prop="end_date" label="结束日期" />
                <el-table-column prop="responder_realname" label="审核领导" />
                <el-table-column prop='response_content' label='审批意见' />
                <el-table-column label='审批时间'>
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 1" type="info">审核中</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="success">已通过</el-tag>
                        <el-tag v-if="scope.row.status == 3" type="danger">已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label='处理'>
                    <template #default="scope">
                        <el-button v-if="scope.row.status == 1" @click="onShowDialog(scope.$index)" type="primary"
                            icon="EditPen" />
                        <el-button v-else disable type="default">已处理</el-button>
                    </template>
                </el-table-column>


            </el-table>
            <template #footer>
                <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total"
                    v-model:current-page="pagination.page" :page-size="1" /> -->
                <OAPagination :total="pagination.total" v-model="pagination.page"></OAPagination>

            </template>
        </el-card>
    </OAMain>
</template>

<script setup>
import OAPageHeader from '@/components/OAPageHeader.vue';
import { ref, reactive, onMounted } from 'vue'
import absentHttp from '@/api/absentHttp';
import { ElMessage } from 'element-plus';
import dateformat from '@/utils/dateformat';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';
let dialogVisib = ref(false)
let absents = ref([]);
let pagination = reactive({
    page: 1,
    total: 1
});
let headleIndex = 0
let absentForm = reactive({
    status: 2,
    response_content: '',
})
let rules = reactive({
    response_content: [
        { required: true, message: '请输入审批意见', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请选择处理状态', trigger: 'change' },
    ]
})
let absentFormRef = ref(null)
onMounted(async () => {
    try {
        let data = await absentHttp.getSubAbsent()
        pagination.total = data.count
        absents.value = data.results
        console.log(absents.value)
    } catch (err) {
        ElMessage.error(err)
    }
})
const onShowDialog = (index) => {
    dialogVisib.value = true
    absentForm.status = 2
    absentForm.response_content = ''
    headleIndex = index
}
const onSubmitAbsent = () => {
    absentFormRef.value.validate(async (valid, field) => {
        if (valid) {
            try {
                dialogVisib.value = false
                const absent = absents.value[headleIndex]
                const data = await absentHttp.handleSubAbsent(absent.id, absentForm.status, absentForm.response_content)
                absents.value.splice(headleIndex, 1, data)
                ElMessage.success('处理成功')
            } catch (err) {
                ElMessage.error(err)
            }
        }
    })
}
</script>

<style scoped></style>